/*
 * PlateTableItem 反应版表格项
 */
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15

Item {
    id: root

    /* property 定义开始 */
    // 全局
    // 字体样式
    property string typeFontFamily: "Alibaba PuHuiTi"

    // 左上角三角字符及对应背景颜色
    property var typeBgColorMap: {'U': '#4EBE77', 'S': '#FFBC0D'}
    // 小三角大小
    property int typeSize: 24
    // 小三角字号
    property int typeFontSize: 13
    // 小三角字体粗细
    property string typeFontWeight: "normal"
    // 小三角字体位置
    property string typeFontAlign: "right"
    property string typeFontBaseline: "ideographic"
    // 小三角字体
    // property string typeFont: `${typeFontWeight} ${typeFontSize}pt '${typeFontFamily}'`
    property string typeFont: `${typeFontWeight} 9pt '${typeFontFamily}'`
    // 小三角显示文字
    property string typeText: "U"

    // Sample
    property string sampleText: "--Sample Default--"
    property string sampleColor: "#FFF"

    // Dye
    property var dyeColorMap: {'F': '#FF2B37', 'V': '#422FCD', 'R': '#00C441', 'C': '#FF873E'}
    property var dyeList: ["F", "V", "R", "C"]

    // 浓度
    property string nongDuStr: ""

    // 代理
    // 下标
    property int selfItemIndex: 0

    // 函数
    /**
      * 处理Item数据
      * @param {string} itemData 使用JSON.stringify包装形成的字符串
      */
    function analyseItemData(itemData){
        var jsonData = JSON.parse(itemData) // 还原成json格式
        // 存储
        typeText = jsonData["type"]
        sampleText = jsonData["sample"]
        dyeList = jsonData["dyes"]
    }

    /* property 定义结束 */

    Rectangle {
        anchors.fill: parent
        color: "transparent"

        // 左上三角
        Canvas {
            id: typeTriangle
            width: typeSize
            height: typeSize
            anchors.top: parent.top
            anchors.left: parent.left
            onPaint: {
                var ctx = getContext("2d")

                // 三角形
                ctx.lineWidth = 0
                ctx.strokeStyle = "#00000000"
                ctx.fillStyle = typeBgColorMap[typeText] ? typeBgColorMap[typeText] : "#000"
                ctx.beginPath()
                // 都 +1 让小三角往下画一个像素，避开边界
                ctx.moveTo(1, 1)
                ctx.lineTo(typeSize + 1, 1)
                ctx.lineTo(1, typeSize + 1)
                ctx.closePath()
                ctx.stroke()
                ctx.fill()
            }
        }

        // 三角文字
        Item {
            id: typeSizeText
            width: typeSize
            height: typeSize
            anchors.top: parent.top
            anchors.left: parent.left

            Label {
                anchors.fill: parent
                font.family: "Alibaba PuHuiTi"
                font.pixelSize: typeFontSize
                text: qsTr(typeText)
                color: "#FFF"
                verticalAlignment: Text.AlignTop
                horizontalAlignment: Text.AlignLeft
                anchors.leftMargin: typeFontSize / 4
                anchors.topMargin: 0
            }
        }

        // 浓度
        Item {
            id: nongDu
            width: nongDuText.implicitWidth
            height: nongDuText.implicitHeight
            anchors {
                top: parent.top
                right: parent.right
                topMargin: 2
                rightMargin: 2
            }

            Label {
                id: nongDuText
                horizontalAlignment: Text.AlignRight
                text: root.nongDuStr
                font.pixelSize: 10
                color: "#FFFFFFFF"
            }
        }

        // 主内容
        ColumnLayout {
            id: contentContainerLayout
            anchors {
                fill: parent
                topMargin: typeSize
            }
            spacing: 6

            Rectangle {
                id: sample
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignCenter
                color: "transparent"
                // color: "red"
                Text {
                    anchors.fill: parent
                    font.family: typeFontFamily
                    font.pixelSize: typeFontSize
                    verticalAlignment: Text.AlignBottom
                    horizontalAlignment: Text.AlignHCenter
                    color: sampleColor
                    text: qsTr(sampleText)
                }
            }

            Rectangle {
                id: dye
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.alignment: Qt.AlignCenter
                color: "transparent"
                // color: "green"

                Row {
                    anchors.top: parent.top
                    anchors.horizontalCenter: parent.horizontalCenter
                    spacing: 3
                    Repeater {
                        model: dyeList
                        Text {
                            font.pixelSize: typeFontSize
                            font.family: typeFontFamily
                            font.bold: true
                            verticalAlignment: Text.AlignVCenter
                            horizontalAlignment: Text.AlignHCenter
                            color: dyeColorMap[modelData] ? dyeColorMap[modelData] : "#000"
                            text: qsTr(modelData)
                        }
                    }
                }

            }

            CustomVerSpacerItem {}
        }
    }
}
